<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="金西振">
    <title></title>
    <style>
        .container{
            width: 900px;
            margin: auto;
        }
        .address{
            width: 120px;
            height: 40px;
            background-color: lightblue;
            position: relative;
        }
        .address-info{
            width: 200px;
            height: 200px;
            border: 1px solid;
            background-color: lightgrey;
            position: absolute;
            left: 0;
            top: 40px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="container">
            <div class="address">
                <div class="name">郑州市</div>
                <div class="address-info">
                    郑州市开封市洛阳市平顶山市安阳市鹤壁市新乡市焦作市濮阳市许昌市漯河市三门峡市南阳市商丘市信阳市周口市驻马店市济源市
                </div>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="container" style="height: 2000px">

        </div>
    </div>


<script>
    var address = document.querySelector('.address');
    var addressInfo = document.querySelector('.address-info');

    address.onclick = function(ev){
        addressInfo.style.display = 'block';
        console.log('address click');
        // 阻止冒泡
        ev.stopPropagation();
    }

    document.body.onclick = function(){
        addressInfo.style.display = 'none';
        console.log('document click');
    }



</script>
</body>
</html>